<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">day</b>

    <el-table :data="tableData">
        <el-table-column prop="recordDate" label="日期" width="120">
        </el-table-column>
        <el-table-column prop="numJihuo" label="净激活数" width="120">
        </el-table-column>
        <el-table-column prop="numActive" label="活跃人数" width="120">
        </el-table-column>
        <el-table-column prop="numRegistered" label="注册人数" width="140">
        </el-table-column>
        <el-table-column prop="numLogin" label="登录人数">
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            tableData: [],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 10,    //每页显示条数
                total: 0        //总条数
            },
        },
        methods: {
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },

            parseElement(currentPage,pageSize) {
                return "page="+currentPage+"&pagesize"+pageSize;
            },
            selectByPage() {
                axios.get("daySum/day?"+ this.parseElement(this.pagination.currentPage,this.pagination.pageSize))
                    // axios.post("studentServlet","method=selectByPage&currentPage="+
                    //     +this.pagination.currentPage+"&pageSize="+this.pagination.pageSize)
                    .then(resp => {
                        this.tableData = resp.data.items;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.page;
                        //总条数
                        this.pagination.total = resp.data.counts;
                    })
            },
        },
        mounted() {
            this.selectByPage()
        }
    });
</script>
</html>